<template>
  <div>
    <div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="7">
            <el-form-item label="国别">
              <el-select v-model="form.country" placeholder="请选择活动区域">
                <el-option label="中国" value="shanghai"></el-option>
                <el-option label="印尼" value="beijing"></el-option>
                <el-option label="马来西亚" value="beijing"></el-option>
                <el-option label="墨西哥" value="beijing"></el-option>
                <el-option label="伊拉克" value="beijing"></el-option>
                <el-option label="缅甸" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="区域">
              <el-select v-model="form.area" placeholder="请选择区域">
                <el-option label="南海" value="shanghai"></el-option>
                <el-option label="渤海" value="beijing"></el-option>
                <el-option label="黄海" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="区块">
              <el-select v-model="form.block" placeholder="请选择区块">
                <el-option label="涠洲" value="涠洲"></el-option>
                <el-option label="文昌" value="文昌"></el-option>
                <el-option label="乌石" value="乌石"></el-option>
                <el-option label="乐东" value="乐东"></el-option>
                <el-option label="北部湾" value="北部湾"></el-option>
                <el-option label="阳江" value="阳江"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="井型">
              <el-select v-model="form.welltype" placeholder="请选择井型">
                <el-option label="直井" value="shanghai"></el-option>
                <el-option label="定向井" value="beijing"></el-option>
                <el-option label="水平井" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="井别">
              <el-select v-model="form.wellSpacing" placeholder="请选择井别">
                <el-option label="生产井" value="shanghai"></el-option>
                <el-option label="探井" value="beijing"></el-option>
                <el-option label="调整井" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="井类">
              <el-select v-model="form.wellCategory" placeholder="请选择井类">
                <el-option label="常规井" value="shanghai"></el-option>
                <el-option label="重点井" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="作业单位">
              <el-select v-model="form.cementCompany" placeholder="请选择作业单位">
                <el-option label="塘沽作业公司" value="shanghai"></el-option>
                <el-option label="湛江作业公司" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="作业时间">
              <el-date-picker v-model="form.date1" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="-">
              <el-date-picker v-model="form.date2" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="套管尺寸">
              <el-select v-model="form.casingSize" placeholder="请选择套管尺寸">
                <el-option label="7" value="shanghai"></el-option>
                <el-option label="8-12" value="shanghai"></el-option>
                <el-option label="9-5/8" value="beijing"></el-option>
                <el-option label="13-3/8" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="套管类型">
              <el-select v-model="form.casingType" placeholder="请选套管类型">
                <el-option label="表层套管" value="shanghai"></el-option>
                <el-option label="技术套管" value="beijing"></el-option>
                <el-option label="尾管" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="固井方式">
              <el-select v-model="form.cementType" placeholder="请选择方式">
                <el-option label="插入法" value="shanghai"></el-option>
                <el-option label="单级单封" value="beijing"></el-option>
                <el-option label="单级双封" value="beijing"></el-option>
                <el-option label="尾管固井" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="井名">
              <el-input v-model="form.wellName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="">
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
 <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="wellName"
      label="井名"
      width="150">      
    </el-table-column>
    <el-table-column
      prop="casingSize"
      label="套管尺寸"
      width="120">
    </el-table-column>
    <el-table-column
      prop="cementType"
      label="固井方式"
      width="120">
    </el-table-column>
    <el-table-column
      prop="date"
      label="作业时间"
      width="120">
    </el-table-column>
    <el-table-column
      prop="cementCompany"
      label="作业单位"
      width="150">
    </el-table-column>
    <el-table-column
      prop="welltype"
      label="井型"
      width="100">
    </el-table-column>
    <el-table-column
      prop="wellSpacing"
      label="井别"
      width="100">
    </el-table-column>
    <el-table-column
      prop="block"
      label="区块"
      width="100">
    </el-table-column>
     <el-table-column
      prop="area"
      label="区域"
      width="100">
    </el-table-column>
    <el-table-column
      prop="country"
      label="国别"
      width="100">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
       
      </template>
    </el-table-column>
  </el-table>

    </div>
  </div>
</template>
<script>
import {getWork} from '@/api/module/dataquery'
  export default {
    data() {
      return {
        form: {
          country: '',
          area: '',
          block: '',
          welltype: '',
          wellSpacing: '',
          delivery: '',
          wellCategory: '',
          cementCompany: '',
          date1: '',
          date2: '',
          casingSize: '',
          casingType: '',
          cementType: '',
          wellName: ''
        },
        tableData: [],
        tempory:[]
      }
    },
    methods: {
      onSubmit() {
        // alert('submit!')
        getWork(1, 10, this.form).then((res) => {
        // alert(res.data.data)
        console.log(res.data.data);
        
         this.tableData = res.data.data;
        })
      }
    }
  }
</script>